<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <title>directive指令</title>
    <script src="angular.js"></script>
    <script src="jquery-1.7.2.js"></script>
    <script>
        //        可以通过以下方式来调用指令：
        //        元素名
        //        属性
        //        类名
        //        注释
        //        通过添加 restrict 属性,并设置值为 "A", 来设置指令只能通过属性的方式来调用:
        //        E 作为元素名使用
        //        A 作为属性使用
        //        C 作为类名使用
        //        M 作为注释使用
        //        restrict 默认值为 EA, 即可以通过元素名和属性名来调用指令。
        //        E = Element, A = Attribute, C = Class, M = Comment

        angular.module('my_app', [])
            .directive('one', [function () {
                return {
                    scope: true, // 继承父级作用域并创建指令自己的作用域
                    // controller: function($scope, $element, $attrs, $transclude) {},// 默认值
                    replace: true,// 我们需要在该实例添加 replace 属性， 否则评论是不可见的。
                    restrict: "M",//设置 restrict 的值为 "M" 才能通过注释来调用指令。
                    template: "<h1>自定义指令!</h1>"
                };
            }])
            .directive('two', [function () {
                return {
                    scope: {}, // 创建指令自己的独立作用域，与父级毫无关系,如果不创建，就和controller的一样
                    controller: function ($scope) {
                        $scope.name = "second"
                    },
                    restrict: 'AE',
                    template: 'second name:{{name}}'
                }
            }])
            .directive('three', [function () {
                return {
                    // scope: false, // 默认值，共享父级作用域
                    // controller: function($scope, $element, $attrs, $transclude) {},// 默认值
                    restrict: 'C',
                    template: 'hello world'
                }
            }])
            .controller('YiMing', ['$scope', function ($scope) {
                $scope.name = "lilisy";
            }]);

    </script>
</head>

<body ng-app="my_app" ng-controller="YiMing">
姓名: <input type="text" ng-model="name"/> <br/>
<!-- directive: one -->
<two></two>
<div two></div>
<div class="three"></div>
</body>

</html>
